import React, { Component } from 'react'
import {
 Checkbox, DatePicker, Form, message, Radio, Select, TimePicker,
} from 'antd'
import moment from 'moment'
import {
 getHashParameterByName, gethours, getminute, getmonth, getWeek,
} from '@/utils/helper'
import { getSchedule, saveSchedule } from '../api'

const { Option } = Select

class Configuration extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cycle: null,
      tblId: getHashParameterByName('tblId'),
    }
    this.configurationForm = React.createRef()
  }

  componentDidMount() {
    this.getSchedule()
  }

  getSchedule = () => {
    const { tblId } = this.state
    getSchedule({ tblId }).then((res) => {
      if (res.status === 200) {
        if (res.data) {
          this.setState({
            cycle: res.data.cycle,
          }, () => {
            this.configurationForm && this.configurationForm.current.setFieldsValue({
              cycleDependence: res.data.cycleDependence,
              cycle: String(res.data.cycle),
              status: !!res.data.status,
              effectiveDate: [
                moment(res.data.effectiveDateStart, 'YYYY-MM-DD'),
                moment(res.data.effectiveDateEnd, 'YYYY-MM-DD'),
              ],
              startTime: String(res.data.cycle) === '0' || String(res.data.cycle) === '1' || String(res.data.cycle) === '2'
                ? moment(
                  `${res.data.startTimeHour}:${res.data.startTimeMin}`,
                  'HH:mm',
                ) : [
                  moment(
                    `${res.data.startTimeHour}:${res.data.startTimeMin}`,
                    'HH:mm',
                  ),
                  moment(
                    `${res.data.endTimeHour}:${res.data.endTimeMin}`,
                    'HH:mm',
                  ),
                ],
              execPoint: res.data.execPoint && res.data.execPoint.split(','),
            })
          })
        }
      }
    })
  }

  // eslint-disable-next-line react/no-unused-class-component-methods
  saveSchedule = () => {
    const { tblId } = this.state
    this.configurationForm.current.validateFields().then(values => {
      this.props.showIs()
      const effectiveDateStart = values.effectiveDate[0].format('YYYY-MM-DD')
      const effectiveDateEnd = values.effectiveDate[1].format('YYYY-MM-DD')
      let startTime = null; let endTime = null
      if (values.cycle === '0' || values.cycle === '1' || values.cycle === '2') {
        startTime = values.startTime.format('HH:mm').split(':')
      } else if (values.cycle === '3' || values.cycle === '4') {
        startTime = values.startTime[0].format('HH:mm').split(':')
        endTime = values.startTime[1].format('HH:mm').split(':')
      }
      saveSchedule({
        tblId,
        effectiveDateStart,
        effectiveDateEnd,
        status: values.status ? 1 : 0,
        cycle: values.cycle,
        startTimeHour: startTime ? startTime[0] : '',
        startTimeMin: startTime ? startTime[1] : '',
        endTimeHour: endTime ? endTime[0] : '',
        endTimeMin: endTime ? endTime[1] : '',
        cycleDependence: values.cycleDependence || values.cycleDependence === 0 ? values.cycleDependence : '',
        execPoint: Array.isArray(values.execPoint)
          ? values.execPoint
            .sort((a, b) => a - b)
            .join()
          : values.execPoint,
      }).then((res) => {
        if (res.status === 200) {
          this.props.show()
          message.success(res.msg)
        } else {
          this.props.show(true)
          message.error(res.msg)
        }
      })
    })
  }

  valuesChange = (value, allValues) => {
    const key = Object.keys(value)[0]
    if (key === 'cycle') {
      this.configurationForm && this.configurationForm.current.setFieldsValue({
        startTime: undefined,
        execPoint: undefined,
      })
      this.setState({
        cycle: Number(allValues.cycle),

      })
    }
  }

  render() {
    const { cycle } = this.state
    return (
      <Form
        colon={false}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        onValuesChange={this.valuesChange}
        ref={this.configurationForm}
      >
        <Form.Item
          label="冻结"
          valuePropName="checked"
          name="status"
        >
          <Checkbox />
        </Form.Item>
        <Form.Item
          label="生效日期"
          name="effectiveDate"
          rules={[{ required: true, message: '请选择生效日期' }]}
        >
          <DatePicker.RangePicker style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item
          label="调度周期"
          name="cycle"
          rules={[{ required: true, message: '请选择调度周期' }]}
        >
          <Select placeholder="请选择调度周期">
            <Option key={0}>月</Option>
            <Option key={1}>周</Option>
            <Option key={2}>天</Option>
            <Option key={3}>小时</Option>
            <Option key={4}>分钟</Option>
          </Select>
        </Form.Item>
        {cycle === 0 || cycle === 1 || cycle === 2
          ? (
            <Form.Item
              label="执行时间"
              name="startTime"
              rules={[{ required: true, message: '请选择执行时间' }]}
            >
              <TimePicker style={{ width: '100%' }} format="HH:mm" />
            </Form.Item>
          ) : null}
        {cycle === 3 || cycle === 4 ? (
          <Form.Item
            label="执行时间"
            name="startTime"
            rules={[{ required: true, message: '请选择执行时间' }]}
          >
            <TimePicker.RangePicker style={{ width: '100%' }} format="HH:mm" />
          </Form.Item>
        ) : null}
        {cycle === 0 || cycle === 1 || cycle === 3 || cycle === 4 ? (
          <Form.Item
            label="调度间隔"
            name="execPoint"
            rules={[{ required: true, message: '请选择调度间隔' }]}
          >
            <Select mode={cycle === 0 || cycle === 1 ? 'multiple' : 'none'} placeholder="请选择调度间隔">
              {cycle === 0
                && getmonth().map((item) => (
                  <Option name={item.name} key={item.id}>
                    {item.name}
                  </Option>
                ))}
              {cycle === 1
                && getWeek().map((item) => (
                  <Option name={item.name} key={item.id}>
                    {item.name}
                  </Option>
                ))}
              {cycle === 4
                && getminute().map((item) => (
                  <Option name={item.name} key={item.id}>
                    {item.name}
                  </Option>
                ))}
              {cycle === 3
                && gethours().map((item) => (
                  <Option name={item.name} key={item.id}>
                    {item.name}
                  </Option>
                ))}
            </Select>
          </Form.Item>
        ) : null}
        <Form.Item
          label="跨周期依赖"
          name="cycleDependence"
        >
          <Radio.Group>
            <Radio value={0}>不依赖上一周期</Radio>
            <Radio value={1}>等待上一周期结束</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
    )
  }
}

export default Configuration
